<template>
  <div>
    <div class="box2">
      <!-- 头部导航 -->
      <div class="header">
        <div class="button" @click="$router.go(-1)">
          <span class="iconfont icon-fanhui"></span>
        </div>
        <div class="center">个人中心</div>
        <span @click="out" class="signout iconfont icon-tuichu"></span>
      </div>
      <div class="vohi">
        <div class="bg" id="bg">
          <!-- <div src="https://cdn.ggac.com/media/work/image/2021/03/1dfa59d0-7b0f-11eb-a4e8-0242c0a82002.jpg" alt=""> -->
        </div>
      </div>
      <!-- 信息栏 -->
      <div class="topimgtext">
        <div class="topimg">
          <!-- 头像 -->
          <div class="img">
            <img :src="img" alt="" />
          </div>
          <!-- 昵称 -->
          <h2 class="textname">{{ name }}</h2>
          <!-- 信息 -->
          <div class="div">
            <div class="button">
              <router-link tag="div" :to="'/follow?id=' + Id" class="left"
                >{{ follows }} 关注</router-link
              >
              <span>|</span>
              <router-link tag="div" :to="'/follow?id=' + Id" class="right"
                >{{ followeds }} 粉丝</router-link
              >
              <span>|</span>
              <div class="right">lv 0</div>
            </div>
          </div>
          <div class="address">
            <span class="name">广西 南宁</span>
            <span class="age">村龄3岁</span>
          </div>
        </div>
      </div>
      <!-- 收藏MV -->
      <div class="mvsublist">
        <h3><span>我的MV</span></h3>
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide item"
              v-for="(item, index) in mvlists"
              :key="index"
            >
              <router-link
                tag="div"
                :to="'/mvsublist?id=' + item.vid"
                class="boxname"
              >
                <div class="img">
                  <img :src="item.coverUrl" alt="" />
                </div>
                <div class="text">
                  <h3 class="h3">{{ item.title }}</h3>
                  <p>{{ item.creator[0].userName }}</p>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 收藏歌单 -->
      <div class="sublist">
        <h3><span>我的歌单</span></h3>
        <div class="content" v-for="(item, index) in lists" :key="index">
          <router-link
            tag="div"
            :to="'/rank/ranklist?id=' + item.id"
            class="boxname"
          >
            <div class="img">
              <img :src="item.coverImgUrl" alt="" />
            </div>
            <div class="text">
              <h3>{{ item.name }}</h3>
              <p>{{ item.trackCount }}首</p>
            </div>
          </router-link>
        </div>
      </div>
      <!-- 退出 -->
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import Swiper from "swiper";
import {
  getUserDetail,
  getUserPlaylist,
  getLoginStatus,
  getMvSublist,
  getLogin,
} from "../api/userinfo";
// getUserAccount,getUserSubcount
export default {
  data() {
    return {
      name: null, //昵称
      img: null, //头像
      backgroundimg: null, //背景
      follows: null, //关注
      followeds: null, //粉丝
      lists: [], //收藏歌单列表
      mvlists: [], //收藏MV列表
      Id: null, //id
      url: null,
      show: false,
    };
  },
  methods: {
    add(id) {
      console.log(id);
    },
    addtodo(id) {
      console.log(id);
    },
    out() {
      getLogin().then((data) => {
        console.log(data);
      });
      Dialog.confirm({
        title: "退出账号",
        message: "是否退出账号？",
      })
        .then(() => {
          // on confirm
          localStorage.clear();
          this.$router.push({ path:'/login'})
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取用户状态
    getLoginStatusFun() {
      getLoginStatus().then((data) => {
        console.log(data);
        // 获取uid
        this.Id = data.data.profile.userId;
        // 获取用户详情
        getUserDetail({ uid: this.Id }).then((data) => {
          this.name = data.profile.nickname; //昵称
          this.img = data.profile.avatarUrl; //头像
          this.backgroundimg = data.profile.backgroundUrl; //背景
          this.follows = data.profile.follows; //关注
          this.followeds = data.profile.followeds; //粉丝
        });
        //收藏的歌单列表
        getUserPlaylist({ uid: this.Id }).then((data) => {
          console.log(data.playlist);
          this.lists = data.playlist;
          console.log(data.playlist[1].subscribed);
        });
      });
    },
    //收藏MV列表
    getMvSublistFun() {
      getMvSublist().then((data) => {
        console.log(data.data);
        this.mvlists = data.data; //mv列表
      });
    },
  },
  mounted() {
    new Swiper(".swiper-container-02", {
      pagination: ".swiper-pagination-02",
      slidesPerView: 3,
      paginationClickable: true,
      observer: true,
      observeParents: true,
      spaceBetween: 30,
    });
  },
  created() {
    this.getLoginStatusFun();
    this.getMvSublistFun();
  },
};
</script>

<style lang="less">
.box2 {
  width: 100%;
  position: absolute;

  margin: auto;
  // overflow: hidden;
  // background-color: tomato;
  background-color: #f1f1f1;
  .header {
    width: 375px;
    height: 90px;
    // background-color: chartreuse;
    display: flex;
    position: absolute;
    z-index: 1;
    .button {
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      position: absolute;
      left: 0;
      span {
        font-size: 25px;
        color: white;
      }
    }
    .center {
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: white;
      font-size: 25px;
      margin: 0 auto;
    }
    .signout {
      color: white;
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      position: absolute;
      right: 0;
      font-size: 25px;
    }
  }

  .vohi {
    width: 375px;
    height: calc(667px * 0.4);
    overflow: hidden;
    .bg {
      width: 100%;
      height: 100%;
      background: url(https://cdn.ggac.com/media/work/image/2021/12/2d8d10f4-5728-11ec-afda-0242c0a84002.jpg);
      position: 50% 50%;
      background-size: 100% !important;
      transform: scale(1);
    }
  }
  .topimgtext {
    width: 375px;
    height: 450px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    .topimg {
      width: calc(375px * 0.9);
      height: 200px;
      position: absolute;
      background-color: #f9f8f8db;
      border-radius: 5px;
      left: 5%;
      bottom: 0px;
      text-align: center;
      .img {
        background-color: violet;
        position: absolute;
        top: -30%;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .textname {
        margin: 0 auto;
        margin-top: 75px;
      }
      .div {
        width: 70%;
        margin: 0 auto;
        .button {
          width: 100%;
          display: flex;
          padding-top: 10px;
          justify-content: space-between;
          color: #797575;
          font-size: 14px;
          .left,
          .right {
            flex: 1;
            line-height: 16px;
            padding-bottom: 10px;
          }
        }
      }

      .address {
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;
        .name {
          padding: 5px 7px;
          margin: 0 5px;
          border: 1px solid #afa3a3;
          border-radius: 12px;
          font-size: 14px;
          color: #3c3b3b;
        }
        .age {
          padding: 5px 7px;
          margin: 0 5px;
          border: 1px solid #afa3a3;
          border-radius: 12px;
          font-size: 14px;
          color: #3c3b3b;
        }
      }
    }
  }

  .sublist {
    margin-bottom: 50px;
    h3 {
      padding-left: 5px;
      span {
        color: #656060;
      }
    }
    width: 100%;
    .content {
      width: 90%;
      margin: 0 auto;
      background-color: rgb(255, 255, 255);
      margin-top: 10px;
      margin-bottom: 10px;
      display: flex;
      border-radius: 10px;
      .boxname {
        width: 85%;
        background-color: rgb(255, 255, 255);
        margin: 0 auto;
        margin-bottom: 20px;
        margin-top: 20px;
        display: flex;
        img {
          width: 70px;
          height: 70px;
          .img {
            height: 100%;
          }
        }
        .text {
          h3 {
            padding-left: 10px;
            padding-top: 10px;
            font-size: 16px;
          }
          p {
            padding-left: 10px;
            padding-top: 5px;
            font-size: 12px;
            color: rgb(204, 201, 201);
          }
        }
      }
    }
  }

  .mvsublist {
    width: 100%;
    margin-top: 220px;
    h3 {
      padding-left: 5px;
      span {
        color: #656060;
      }
    }
    .swiper-wrapper {
      padding: 10px 0px 0px 10px;
      img {
        width: 120px;
        height: 120px;
        border-radius: 50%;

        .img {
          height: 100%;
          border-right: 50%;
        }
      }
      .text {
        .h3 {
          padding-left: 5px;
          padding-top: 5px;
          width: 100%;
          text-align: center;
          height: 23px;
          line-height: 23px;
          overflow: hidden;
          color: #656060;
          font-size: 16px;
        }
        p {
          width: 100%;
          font-size: 12px;
          color: #ccc9c9;
          height: 24px;
          text-align: center;
          overflow: hidden;
          margin: 0;
        }
      }
    }
  }
}
</style>